<template>
	<view class="container">
		
		<!-- #ifndef MP-TOUTIAO -->
		<!-- 自定义导航 -->
		<st-custom-header title="支付成功"></st-custom-header>
		<!-- #endif -->
		
		<!-- 背景块 -->
		<view class="header-bg-block"></view>
		
		<view class="pay-info">
			<view class="total-bar">
				<view class="hd">应付金额<text class="iconfont">&#xe6d2;</text></view>
				<view class="fd" v-if="orderInfo.payprice >= 0">
					<text class="symbol">{{globalExchangeRate}}</text>
					<text>{{orderInfo.payprice}}</text>
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">产品名称：</view>
				<view class="bd" v-if="orderInfo.productname">
					{{orderInfo.productname}}<text v-if="orderInfo.suit_name"><view v-if="orderInfo.suit_name">({{orderInfo.suit_name}})</view></text>
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">产品编号：</view>
				<view class="bd" v-if="orderInfo.series">
					{{orderInfo.series}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">订单号：</view>
				<view class="bd" v-if="orderInfo.ordersn">
					{{orderInfo.ordersn}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">支付时间：</view>
				<view class="bd" v-if="orderInfo.paytime">
					{{orderInfo.paytime}}
				</view>
			</view>
		</view>
		
		<block v-if="myapp.redbag && envelopeShow">
			<!-- 红包 -->
			<view class="red_bag" @click="toRedEnvelope(envelopeShow)">
				<text class="txt">瓜分{{envelopeShow.view_total}}元红包</text>
			</view>
		</block>
		
		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false" v-if="orderInfo.id">
			<view class="footer-btn-con">
				<view class="btn-home" @click="toIndexPage">返回首页</view>
				<view class="btn-order" v-if="hasOrderDetail" @click="toOrderDetail">查看订单</view>
			</view>
		</footer-fixed-bar>
	</view>
</template>

<script>
	import footerFixedBar from "@/components/footer-fixed-bar.vue";
	import {get_date_format,check_app_install} from '@/utils/utils.js';
	import {getOrderDetailPage,toAppIndex,hasOrderDetailPage} from "@/utils/toPath.js"
	export default {
		components: {
			footerFixedBar
		},
		data() {
			return {
				orderInfo:{},
				myapp:{},
				envelopeShow:'',
				hasOrderDetail: false
			}
		},
		onLoad(options) {
			if (options.orderid) {
				this.id = options.orderid;
				this.getOrderDetail();
				// 检查是否安装红包应用
				this.myapp.redbag = check_app_install('red_envelope');
			} else {
				uni.showToast({
					title: '参数信息有误',
					icon: 'none'
				})
			}
		},
		methods: {
			
			// 获取订单详情
			async getOrderDetail() {
				let params = {
					method: 'api/v2/order/detail',
					id: this.id
				};
				uni.showLoading({
					title: '加载中...'
				})
				let res = await this.$http(params);
				uni.hideLoading();
				if (res.status) {
					
					this.orderInfo = res.data;
					// 判断是否是已经支付成功
					if(this.orderInfo.status == 2 || this.orderInfo.status == 5 || (this.orderInfo.status==0 && this.orderInfo.ispay==1))
					{
						// 检查是否有支付红包
						if(this.myapp.redbag)
						{
							this.getOrderEnvelope();
						}
						// 检查是否有订单详情
						this.hasOrderDetail = hasOrderDetailPage(this.orderInfo.typeid);
					}
					else
					{
						// 前往支付异常页面
						uni.redirectTo({
							url: `/pages/order/payfail?ordersn=${this.orderInfo.ordersn}&orderid=${this.orderInfo.id}`
						})
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			// 检查是否有支付成功红包
			async getOrderEnvelope(){
				let params = {
					method: 'api/v2/envelope/get_order_envelope_info',
					order_sn: this.orderInfo.ordersn,
				};
				let res = await this.$http(params);
				if (res.status) {
					this.envelopeShow = res.data.envelope_info;
				}
			},
			// 前往订单详情页面
			toOrderDetail(){
				if(this.orderInfo.id)
				{
					let pageParams = {
						pid :this.orderInfo.productautoid,
						orderid : this.orderInfo.id,
						typeid : this.orderInfo.typeid,
						title : this.orderInfo.productname
					};	
					let url = getOrderDetailPage(this.orderInfo.typeid,pageParams);
					if(url)
					{
						uni.redirectTo({
							url: url
						})
					}
				}
				
			},
			// 前往首页
			toIndexPage(){
				toAppIndex();
			},
			// 前往红包页面
			toRedEnvelope(item){
				uni.navigateTo({
					url:`/subPackages/redEnvelope/receive?envelopeid=${item.id}`
				})
			},
			// 获取日期
			get_date_format(time) {
				return get_date_format(time,"yyyy年MM月dd号 hh:mm:ss");
			}
		}
	}
</script>

<style lang="scss">
	
page{
	background: #f6f6f6
}

.header-bg-block{
	position: absolute;
	width: 100%;
	height: 260rpx;
	background: linear-gradient(to right, #5BE181 0%, #11C586 100%);
	&:after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, transparent, #f6f6f6);
	}
}

.container {
	position: relative;
}

.pay-info {
	margin: 20rpx 24rpx;
	background: $uni-bg-color;
	border-radius: 20rpx;
	padding: 24rpx;
	position: relative;
	display: block;
	z-index: 1;
	font-family: Arial, Helvetica, sans-serif;
	&::after{
		content: "";
		display: block;
		height: 100rpx;
		position: absolute;
		top: 1px;
		left: 1px;
		right: 1px;
		z-index: -1;
		border-radius: 20rpx;
		background: linear-gradient(to bottom, #DEFCE6, transparent);
	}

	.total-bar{
		color: #FF4A50;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 0 20rpx;
		font-weight: bold;
		font-size: 48rpx;
		.hd{
			color: #222;
			.iconfont{
				color: #11C586;
				vertical-align: middle;
				margin: -6rpx 0 0 8rpx;
			}
		}
		.fd{
			color: #FF4A50;
			.symbol{
				font-size: 28rpx
			}
		}
	}

	.pay-info-item {
		display: flex;
		font-size: $uni-font-size-base;
		padding: 16rpx 0;

		.hd {
			color: #333;
			width: 144rpx;
			flex: 0 0 auto;
		}

		.bd {
			color: $uni-text-color-grey;
			word-break: break-all;
			flex: 1 1 auto;
		}
	}
}

.red_bag {
	background: url("https://static.member.stourweb.cn/uniapp/static/images/redbag_bg_pay.png") center no-repeat;
	background-size: contain;
	height: 262rpx;
	margin: 24rpx;
	text-align: center;
	line-height: 212rpx;
	font-size: 44rpx;
	.txt{
		display: inline-block;
		background: linear-gradient(to bottom, #FFEDA6 0%, #FF9238 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: bold;
		margin: 8rpx 0 0 12rpx;
	}
}

// 底部按钮
.footer-btn-con {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	background: #fff;
	.btn-home,
	.btn-order{
		flex: 1 1 50%;
		text-align: center;
		width: 50%;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 200rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: bold;
		background: $uni-bg-color-grey;
	}
	.btn-home{
		color: #FF644E;
		border: 1px solid #FF644E;
	}
	.btn-order{
		color: #fff;
		margin-left: 20rpx;
		background: linear-gradient(to right, #FF8A2A 0%, #FF644E 100%);
	}
}
</style>
